<script setup lang="ts">
import { MittBusUtil } from '/@lib/utils/mittBus.ts'
import { useLoading } from '/@lib/hooks/useLoading.ts'
import { ApiSysDept } from '/@/api/system/sysDept'

const { loading, showLoading, hideLoading } = useLoading()
const treeRef = ref()
const treeData = ref<any[]>([])
const getTreeList = async () => {
  showLoading()
  try {
    const _treeData = await ApiSysDept.tree()
    treeData.value = _treeData
    if (_treeData.length > 0) {
      MittBusUtil.emit('onDeptSelectUser', {
        id: _treeData[0].id,
        label: _treeData[0].label
      })
      await nextTick(() => {
        treeRef.value?.getRef()?.setCurrentKey(_treeData[0].id)
      })
    }
  } finally {
    hideLoading()
  }
}
getTreeList()

const handleNodeClick = (_: any, node: any) => {
  MittBusUtil.emit('onDeptSelectUser', {
    id: node.key,
    label: node.label
  })
}
</script>

<template>
  <el-card shadow="never" class="no-margin-bottom">
    <template #header>
      <div class="header-title">部门列表</div>
    </template>

    <VipTree
      ref="treeRef"
      v-loading="loading"
      node-key="id"
      :data="treeData"
      :props="{ label: 'label', children: 'children' }"
      @node-click="handleNodeClick"
    >
    </VipTree>
  </el-card>
</template>

<style scoped lang="scss"></style>
